<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <base href="#" target="">
    <title>导航栏</title>
    <style>
        * {
            font-family: "微软雅黑";
        }
        ul.del{
            margin: 0px;
            padding: 0px;
        }
        ul.non{
            list-style-type: none;
        }
        ul.block {
            background: darkgray;
            width: 60px;
        }
        ul.block a{
            display: block;
        }
        
        ul.beauty{
            background: dodgerblue;
            list-style: none;
            text-align: center;
            margin: 0px;
            padding: 4px 0px;
            
            width: 120px;
        }
        ul.beauty a{
            display: block;
            padding: 5px;
            color: white;
            text-decoration: none;
        }
        ul.beauty a:hover{
            background: royalblue;
        }
    </style>
</head>
<body>
    <h1>最普通的导航栏</h1>
    <ul>
        <li><a href="">导航栏</a></li>
        <li><a href="">导航栏</a></li>
        <li><a href="">导航栏</a></li>
        <li><a href="">导航栏</a></li>
        <li><a href="">导航栏</a></li>
    </ul>
    <h1>删除ul 的 type</h1>
    <ul class="non">
        <li><a href="">导航栏</a></li>
        <li><a href="">导航栏</a></li>
        <li><a href="">导航栏</a></li>
        <li><a href="">导航栏</a></li>
        <li><a href="">导航栏</a></li>
    </ul>
    <h1>删除margin和padding</h1>
    <ul class="del non">
        <li><a href="">导航栏</a></li>
        <li><a href="">导航栏</a></li>
        <li><a href="">导航栏</a></li>
        <li><a href="">导航栏</a></li>
        <li><a href="">导航栏</a></li>
    </ul>
    <h1>把每个选项变为display: block</h1>
    <p>把每个a变为block，可以使a整体变为链接部分，不只是文本</p>
    <ul class="del non block">
        <li><a href="">导航栏</a></li>
        <li><a href="">导航栏</a></li>
        <li><a href="">导航栏</a></li>
        <li><a href="">导航栏</a></li>
        <li><a href="">导航栏</a></li>
    </ul>
    <h1>做的好看一点</h1>
    <ul class="beauty">
        <li><a href="">HOW GEE</a></li>
        <li><a href="">SOBER</a></li>
        <li><a href="">ZUTTER</a></li>
        <li><a href="">CAFE</a></li>
        <li><a href="">LOVE SONG</a></li>
    </ul>
</body>
</html>